今天終於邁入第20天啦！我雖然不是一個擅長寫部落格文章的人，也認為自己實力還有很多不足的部分，但能堅持20天對我這種不自律的人而言，已經是個奇蹟了。題外話到這邊，今天要來介紹型別查詢(Type Query)，也會把一些前面提過的typeof和keyof再拿出來聊聊，忘記的話能回去複習一下這兩篇喔！順帶一提，這次typeof和keyof的語法應用，會更著重在Type Query上。

• [Day-13]型別收窄(Type Narrowing)
• [Day-17] 泛型：條件約束

何謂 Type Query？

在 TypeScript 中，Type Query指的是從現有的值或型別取得型別相關資訊。

例如 typeof 可以從一個已存在的變數或物件取得它的型別：

const user_1 = {
  name: "Patrick",
  password: 5566
};

type User = typeof user_1;

這時候 User 會得到 user_1 的型別：

{
  name: string;
  password: number;
}

要注意的是，這裡的typeof和之前型別收窄介紹的typeof雖然語法相同，但使用情境不同。這次是在「型別位置」使用typeof，用來取得變數或屬性的型別。

Index Type Query 又是什麼？

keyof 在 TypeScript 中也被稱為 Index Type Query。它可以取得某個型別的所有屬性名稱（keys），並將它們組成聯合型別。

例如：

interface User {
  name: string;
  password: number;
}

type UserKeys = keyof User;
// "name" | "password"

因此，keyof User 的結果就是："name" | "password"。要注意的是，keyof 接受的是型別，而不是變數或值，所以不能直接寫在變數後面。

typeof vs keyof

總結一下typeof和keyof的差別：

大家有發現到甚麼嗎？我們能透過typeof先將變數轉成型別，再從物件型別中取得屬性，並轉換成聯合型別，通常在限制函式參數時會使用到keyof typeof。

//keyof typeof範例：
//先建立一個變數(物件)
const colors = {
  primary: "#007bff",
  success: "#28a745",
  danger: "#dc3545"
};

//keyof需要接型別，因此不能直接使用變數
type ColorKeys = keyof colors; //不合法

//先用typeof取得colors的型別
//再使用keyof取得它的key
type ColorKeys = keyof typeof colors;
// "primary" | "success" | "danger"

// 這樣我們就能拿來限制參數了！
function printHexCode(colorName: colorKeys) {
  console.log(colors[colorName]);
}

printHexCode("primary"); //合法
printHexCode("warning"); //因為warning不在colorKeys物件內，TS會因此報錯

小結

今天補充了Type Query的小知識和typeof、keyof的應用，希望大家能有所收穫，我們明天見！